<template>
  <div id="answer">
    <!--这里的代码和创建问卷那里的<基本>一样的-->
    <div id="questionnaire-edit" :class="previewIsFull?previewClass[0]:previewClass[1]">
      <h3 class="type" v-show="questionList.singleOption.length > 0">单选</h3>
      <!--单选-->
      <div id="single">
        <div v-for="(item,index) in questionList.singleOption">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.singleOption[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[单选]</span>
              <span class="del-option" v-show="editingList.singleOption[index]" @click="questionList.singleOption.splice(index,1);checkEditing();">删除</span>
            </h5>
          </div>
          <!--选项-->
          <div v-for="(option,index2) in item.options">
            <input type="radio" :name="item.title"/>
            <template>
              <input v-if="editingList.singleOption[index]" v-model="item.options[index2]"/>
              <label v-else v-text="option"></label>
            </template>
          </div>
          <hr />
        </div>
      </div>

      <h3 class="type" v-show="questionList.multiOption.length > 0">多选</h3>
      <!--多选-->
      <div id="multi">
        <div v-for="(item,index) in questionList.multiOption">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.multiOption[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[多选]</span>
              <span class="del-option" @click="questionList.multiOption.splice(index,1);checkEditing()" v-show="editingList.multiOption[index]">删除</span>
            </h5>
          </div>
          <!--选项-->
          <div v-for="(option,index2) in item.options">
            <input type="checkbox" :name="item.title"/>
            <template>
              <template v-if="editingList.multiOption[index]">
                <input v-model="item.options[index2]"/>
                <span class="edit-option">
                  <i class="el-icon-plus" style="float: left" @click="questionList.multiOption[index].options.splice(index2 + 1,0,'问题' + (index2 + 2) )"></i>
                  <i class="el-icon-minus" style="float: right" @click="questionList.multiOption[index].options.splice(index2,1)"></i>
                </span>
              </template>
              <label v-else v-text="option"></label>
            </template>
          </div>
          <hr />
        </div>
      </div>

      <h3 class="type" v-show="questionList.blanks.length > 0">填空</h3>
      <!--填空-->
      <div id="multi">
        <div v-for="(item,index) in questionList.blanks">
          <div class="title-box">
            <h5>
              {{index + 1 + ". "}}
              <input v-if="editingList.blanks[index]" v-model="item.title"/>
              <label v-else v-text="item.title"></label>
              <span>[填空]</span>
            </h5>
          </div>
          <!--答案-->
          <div>
            <u style="border-bottom:solid black 2px">
              <input type="text" placeholder="请输入你的答案" v-model="item.answer" style="width: 100%;color: red;border: none;padding: 10px"/>
            </u>
          </div>
        </div>
      </div>

      <div id="personal-info">
        <form class="form-center">
          <div>
            <label>姓名：</label><input type="text"/>
          </div>
          <div>
            <label>电话：</label><input type="text"/>
          </div>
          <div>
            <label>邮箱：</label><input type="text"/>
          </div>
          <div>
            <label>其他：</label><input type="text"/>
          </div>
        </form>
      </div>

      <div id="finish">
        <el-button type="success">取消</el-button>
        <el-button type="success" @click="submit()">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//这个是回答卷的页面
export default {
  name: "AnswerQuestionnaire",
  data() {
    return {
      popupShow: false,
      previewIsFull: true,
      previewClass: ["questionnaire-edit-full-screen","questionnaire-edit"],
      questionList:{
        //单选
        singleOption:[
          {
            title: "测试1",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试2",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试3",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试4",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
        ],
        multiOption:[
          {
            title: "测试5",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试6",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试7",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
          {
            title: "测试8",
            options: ["选项一", "选项二", "选项三", "选项四"],
          },
        ],
        blanks:[
          {
            title: "测试9",
            answer:''
          },
          {
            title: "测试9",
            answer:''
          },
          {
            title: "测试9",
            answer:''
          },
          {
            title: "测试9",
            answer:''
          }
        ],
        matrix:[

        ],
        scale:[

        ],
      },
      //表示的是某一个题是否在编辑状态
      editingList:{
        //单选
        singleOption:[
          false,
        ],
        multiOption:[
          false,
        ],
        blanks: [
          false
        ],
        matrix:[
          false
        ],
        scale:[
          false
        ],
      }
    }
  },
  methods: {
    submit(){
      this.$alert('提交成功').then(
          ()=>{
            this.$router.push('/user-center/answers-manage');
          }
      );
    }
  }
}
</script>

<style scoped>
.form-center{
  background-color: #578c39;
  position: relative;
  width: 30%;
  left: 35%;
}

.form-center input[type='text']{
  border: none;
}

.form-center>div{
  background-color: gray;
  display: flex;
  justify-content: space-around;
}

#finish{
  background-color: #f0f9eb;
  display: flex;
  justify-content: space-around;
}
/*回答的最外层页面展示*/
#answer{

}

#full-screen-box{
}

#full-screen-box>i{
  font-size: 30px;
  float: right;
}

#full-screen-box>i:hover{
  color:red;
}

.hover-red:hover{
  color:red;
  cursor: pointer;
}

.del-option{
  color:gray;
}

.del-option:hover {
  color: red;
}

.type{
  color: red;
}

.edit-option{
  display: inline-block;
  background-color: yellow;
}

.edit-option>i{
  margin: 0 5px 0 5px;
}

.modify-ques:hover{
  color: red;
}

.title-box{
  background-color: rgb(89, 229, 79);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  height: auto;
}

.questionnaire-edit{
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #c07a40;
  left: 10%;
  top: 10%;
  overflow: scroll;
}

.questionnaire-edit-full-screen{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #c07a40;
  overflow: scroll;
  left: 0;
  top: 0;
  z-index: 1;
}

.questionTypeDiv{
  left: 0;
  width: 100%;
  background-color: #f6b6a3;
  position: absolute;
  display: flex;
  justify-content: space-around;
}

.questionTypeDiv>a{
  margin: 0 20px 0 20px;
  padding: 0 20px 0 20px;
  background-color: #f0f9eb;
}
</style>